<template>
  <div class="system-bg">
    <el-card class="user-card" shadow="hover">
      <div slot="header" class="card-header-vertical">
        <div class="header-title">分支详情</div>
      </div>
      <el-descriptions :title="branch.name" :column="2" border>
        <el-descriptions-item label="家族">{{ branch.clanName }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ branch.leaderName }}</el-descriptions-item>
        <el-descriptions-item label="简介" :span="2">{{ branch.description }}</el-descriptions-item>
        <el-descriptions-item label="迁徙路线" :span="2">
          <div v-if="branch.migrationRoute && branch.migrationRoute.length">
            <el-tag v-for="(point, idx) in branch.migrationRoute" :key="idx" style="margin:2px">{{point.lng}},{{point.lat}}</el-tag>
            <div id="migrationMapDetail" style="width:100%;height:260px;margin-top:10px;border-radius:8px;overflow:hidden;"></div>
          </div>
          <div v-else>无</div>
        </el-descriptions-item>
        <el-descriptions-item label="地图标记" :span="2">
          <div v-if="branch.mapMarker">{{ branch.mapMarker.lng }},{{ branch.mapMarker.lat }}
            <div id="markerMapDetail" style="width:100%;height:180px;margin-top:10px;border-radius:8px;overflow:hidden;"></div>
          </div>
          <div v-else>无</div>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="地图权限设置" :span="2">
          <el-input type="textarea" :value="branch.permissionStr" :rows="2" readonly />
        </el-descriptions-item> -->
      </el-descriptions>
      <div class="detail-footer">
        <el-button class="outline-btn" @click="$router.back()">返回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getBranchList } from '@/api/branch';
import { initMap } from '@/utils/amap-simple';
export default {
  data() {
    return {
      branch: {
        name: '', clanName: '', leaderName: '', description: '', migrationRoute: [], mapMarker: null, permissionStr: ''
      }
    };
  },
  async created() {
    const id = this.$route.params.id;
    const data = await getBranchList({ id });
    let branch = (data.records && data.records.length) ? data.records[0] : {};
    if (branch.migrationRoute && typeof branch.migrationRoute === 'string') {
      try { branch.migrationRoute = JSON.parse(branch.migrationRoute); } catch { branch.migrationRoute = []; }
    }
    if (branch.mapMarker && typeof branch.mapMarker === 'string') {
      try { branch.mapMarker = JSON.parse(branch.mapMarker); } catch { branch.mapMarker = null; }
    }
    branch.permissionStr = branch.permission ? (typeof branch.permission === 'string' ? branch.permission : JSON.stringify(branch.permission, null, 2)) : '';
    this.branch = branch;
    this.$nextTick(() => {
      this.renderMigrationMap();
      this.renderMarkerMap();
    });
  },
  methods: {
    async renderMigrationMap() {
      if (!this.branch.migrationRoute || !this.branch.migrationRoute.length) return;
      const center = this.branch.migrationRoute[0] || { lng: 113, lat: 28 };
      const map = await initMap('migrationMapDetail', { zoom: 8, center: [center.lng, center.lat] });
      // 画折线
      if (this.branch.migrationRoute.length > 1) {
        const AMap = window.AMap;
        const path = this.branch.migrationRoute.map(p => [p.lng, p.lat]);
        const polyline = new AMap.Polyline({
          path,
          strokeColor: ['#6a82fb', '#fc5c7d', '#ffd803'],
          strokeWeight: 8,
          strokeOpacity: 0.95,
          isOutline: true,
          outlineColor: '#fff',
          strokeStyle: 'solid',
          showDir: true,
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 10
        });
        map.add(polyline);
      }
      // 标记点（带中文地名）
      this.branch.migrationRoute.forEach(point => {
        const lnglat = [point.lng, point.lat];
        window.AMap.plugin('AMap.Geocoder', () => {
          const geocoder = new window.AMap.Geocoder();
          geocoder.getAddress(lnglat, (status, result) => {
            let labelContent = '';
            if (status === 'complete' && result.regeocode) {
              labelContent = `<div class="marker-label">${result.regeocode.formattedAddress}</div>`;
            } else {
              labelContent = `<div class="marker-label">${lnglat[0]},${lnglat[1]}</div>`;
            }
            const marker = new window.AMap.Marker({
              position: lnglat,
              label: {
                content: labelContent,
                direction: 'top'
              }
            });
            map.add(marker);
          });
        });
      });
    },
    async renderMarkerMap() {
      if (!this.branch.mapMarker) return;
      const center = this.branch.mapMarker;
      const map = await initMap('markerMapDetail', { zoom: 10, center: [center.lng, center.lat] });
      // 标记点（带中文地名）
      const lnglat = [center.lng, center.lat];
      window.AMap.plugin('AMap.Geocoder', () => {
        const geocoder = new window.AMap.Geocoder();
        geocoder.getAddress(lnglat, (status, result) => {
          let labelContent = '';
          if (status === 'complete' && result.regeocode) {
            labelContent = `<div class="marker-label">${result.regeocode.formattedAddress}</div>`;
          } else {
            labelContent = `<div class="marker-label">${lnglat[0]},${lnglat[1]}</div>`;
          }
          const marker = new window.AMap.Marker({
            position: lnglat,
            label: {
              content: labelContent,
              direction: 'top'
            }
          });
          map.add(marker);
        });
      });
    }
  }
};
</script>
<style scoped>
.system-bg {
  min-height: 80vh;
  background: linear-gradient(135deg, #f4f6fa 60%, #e0e7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
}
.user-card {
  width: 900px;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  background: rgba(255,255,255,0.95);
  transition: box-shadow 0.3s;
}
.card-header-vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 8px;
}
.header-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}
.outline-btn {
  background: #fff;
  border: 1px solid #6a82fb;
  color: #6a82fb;
  margin-left: 8px;
  transition: all 0.2s;
}
.outline-btn:hover {
  background: #6a82fb;
  color: #fff;
}
.marker-label {
  background: rgba(64,158,255,0.95);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.detail-header-flex {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-bottom: 8px;
}
.detail-footer {
  margin-top: 32px;
  text-align: center;
}
</style> 